<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="24">
          <h2>Demo 测试页面</h2>
          <p>这个页面用于测试调用 /module/demo/test 接口</p>
        </el-col>
      </el-row>
      
      <el-divider></el-divider>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-connection" @click="handleTest">
            测试接口
          </el-button>
          <el-button type="info" icon="el-icon-refresh" @click="handleClear">
            清空结果
          </el-button>
        </el-col>
      </el-row>
      
      <el-divider></el-divider>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <div slot="header">
              <span>接口响应结果</span>
            </div>
            <div v-if="loading" style="text-align: center; padding: 20px;">
              <i class="el-icon-loading" style="font-size: 24px;"></i>
              <p>请求中...</p>
            </div>
            <div v-else-if="result">
              <el-alert
                :title="result.code === 200 ? '请求成功' : '请求失败'"
                :type="result.code === 200 ? 'success' : 'error'"
                :description="JSON.stringify(result, null, 2)"
                show-icon
                :closable="false">
              </el-alert>
            </div>
            <div v-else style="text-align: center; padding: 20px; color: #909399;">
              <i class="el-icon-info" style="font-size: 24px;"></i>
              <p>暂无数据，请点击"测试接口"按钮</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { testApi } from '@/api/demo'

export default {
  name: 'DemoList',
  data() {
    return {
      loading: false,
      result: null
    }
  },
  methods: {
    // 测试接口
    handleTest() {
      this.loading = true
      this.result = null
      
      testApi().then(response => {
        this.result = response
        this.$modal.msgSuccess('接口调用成功！')
      }).catch(error => {
        this.result = {
          code: 500,
          msg: error.message || '请求失败',
          data: null
        }
        this.$modal.msgError('接口调用失败：' + (error.message || '未知错误'))
      }).finally(() => {
        this.loading = false
      })
    },
    
    // 清空结果
    handleClear() {
      this.result = null
      this.$modal.msgSuccess('已清空结果')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

p {
  margin: 0;
  color: #606266;
}

.el-card {
  border-radius: 8px;
}

.el-divider {
  margin: 20px 0;
}
</style>

